<template>
	<view class="container">
		<!-- 导航栏 -->
		<uni-nav-bar title="智慧养老" left-icon="location" right-icon="scan"></uni-nav-bar>
		<uni-row>
			<!-- <uni-col :span="2"><uni-icons type="scan" size="32" style="position: relative;top:15px;"></uni-icons></uni-col> -->
			<uni-col :span="24"><uni-search-bar placeholder="搜索" bgColor="#EEEEEE" @confirm="search" /></uni-col>
			<!-- <uni-col :span="2"><uni-icons type="chat" size="32" style="position: relative;top:15px;"></uni-icons></uni-col> -->
		</uni-row>

		<!-- 轮播图 -->
		<swiper class="swiper-container" autoplay="true" circular="true" @change="change">
			<swiper-item v-for="(item ,index) in info" :key="index">
				<view class="swiper-item">
					<image :src="item.image"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 宫格 -->
		<uni-grid class="grid-container" :column="4" :show-border="false" :square="false" :highlight="false">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
				<navigator :url="item.url">
					<view class="grid-item-container">
						<view class="icon-container"><uni-icons :type="item.icon" size="36" ></uni-icons></view>
						<text class="text">{{ item.text }}</text>
					</view>
				</navigator>
			</uni-grid-item>
		</uni-grid>

		<!-- 卡片 -->
		<uni-card :cover="cover" @click="onClick">
			<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
			<text class="uni-body">健康资讯</text>
			<view slot="actions" class="card-actions">
				<view class="card-actions-item" @click="actionsClick('分享')">
					<uni-icons type="redo" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">分享</text>
				</view>
				<view class="card-actions-item" @click="actionsClick('点赞')">
					<uni-icons type="heart" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">点赞</text>
				</view>
				<view class="card-actions-item" @click="actionsClick('评论')">
					<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">评论</text>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
  import SearchValue from '../search/search.vue'
	export default {
    components:{
      SearchValue
    },
		data() {
			return {
				info: [{
					image: '/static/swiper_image1.jpg'
				}, {
					image: '/static/swiper_image2.jpg'
				}, {
					image: '/static/swiper_image3.jpg'
				}],
				current: 0,
				mode: 'round',
				dynamicList: [],
				list: [{
						icon: 'person',
						text: '老人信息',
						url: '/pages/health/health',
					},
					{
						icon: 'shop',
						text: '商品服务',
						url: '/pages/goods/goods',
					},
					{
						icon: 'heart',
						text: '健康资讯',
						url: '/pages/health_counse/health_counse',
					},
					{
						icon: 'chatboxes',
						text: '预约入住',
						url: '/pages/appointment/appointment',
					},
				],
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',

			}
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			change(e) {
				this.current = e.detail.current;
			},
			onClick(e){
				console.log(e)
			},
			actionsClick(text){
				uni.showToast({
					title:text,
					icon:'none'
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.swiper-container{
		margin-left: 13px;
		margin-bottom: 10px;
		width: 320px;
		height: 240px;
	}
	.grid-item-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 10px;
	}
	.icon-container{
		margin-bottom: 5px;
	}
	.text{
		font-size: 16px;
	}
	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
</style>
